<template>
  <div class="app-portal-content" v-if="form" v-loading="loading">
    <div class="app-portal-cnt-hd">
      <div class="app-portal-hd-icon">
        <JIcon :icon="DFT_ICONS.chartLine" v-if="form && form.form_id > 0" />
        <JIcon :icon="DFT_ICONS.platform" v-else-if="form.group_id === -100" />
        <JIcon :icon="DFT_ICONS.global" v-else-if="form.group_id === -1" />
        <JIcon :icon="DFT_ICONS.app" v-else-if="form.group_id === 1" />
      </div>
      <div class="app-portal-title" v-html="form.form_name || form.name"></div>
      <div style="color: #999; font-size: 13px; margin-top: 2px;">&nbsp;下的报表</div>
      <div class="app-portal-tools"/>
      <el-button
        class="app-group-add-btn"
        type="text"
        size="small"
        @click="handleShowCreate()">
        <template #icon>
          <JIcon :icon="DFT_ICONS.add" />
        </template>
        创建报表
      </el-button>
    </div>

    <div class="app-portal-search">
      <el-radio-group v-model="query.type" size="mini" style="margin-right: 10px;">
        <el-radio-button label="">全部</el-radio-button>
        <el-radio-button label="1">定义报表</el-radio-button>
        <el-radio-button label="3">低码报表</el-radio-button>
      </el-radio-group>
      <el-input v-model="query.title" size="mini" style="width: 260px;">
        <el-button slot="append" icon="el-icon-search" @click="refresh"></el-button>
      </el-input>
    </div>

    <div class="app-portal-cnt-bd comps">
      <el-row :gutter="10">
        <el-col :span="6" v-for="report in list" :key="report.id">
          <div
            class="comp-box"
            :class="{ active: report?.reportdef_id === selected?.reportdef_id }"
            @click="handleSelect(report)">
            <div class="comp-head">
              <span class="comp-head-title w-full text-ellipsis overflow-hidden">{{ report.title }}</span>
              <span
                class="comp-head-remark w-full text-ellipsis overflow-hidden"
                v-copy="report.reportdef_code"
                v-tippy="{ arrow: true, placement: 'right' }"
                content="点击复制"
              >
                {{ report.reportdef_code }}
              </span>
            </div>
            <div class="comp-body">
              <div class="comp-chart-icons">
                <JIcon
                  :icon="DFT_ICONS.chartTable"
                  class="chart-icon"
                  v-tippy="{ arrow: true }"
                  content="表格"
                />
                <JIcon
                  :icon="DFT_ICONS.chartBar"
                  class="chart-icon"
                  :class="{ disabled: !$reportUtils.canChartBar(report) }"
                  v-tippy="{ arrow: true }"
                  content="柱状图"
                />
                <JIcon
                  :icon="DFT_ICONS.chartLine"
                  class="chart-icon"
                  :class="{ disabled: !$reportUtils.canChartLine(report) }"
                  v-tippy="{ arrow: true }"
                  content="折线图"
                />
                <JIcon
                  :icon="DFT_ICONS.chartPie"
                  class="chart-icon"
                  :class="{ disabled: !$reportUtils.canChartPie(report) }"
                  v-tippy="{ arrow: true }"
                  content="饼图"
                ></JIcon>
                <JIcon
                  :icon="DFT_ICONS.chartCard"
                  class="chart-icon"
                  :class="{ disabled: !$reportUtils.canChartCard(report) }"
                  v-tippy="{ arrow: true }"
                  content="数字卡"
                ></JIcon>
              </div>
            </div>
            <span class="comp-foot" v-if="report?.form?.form_name">表单：{{ report.form.form_name }}</span>
            <div class="actions">
              <el-button size="small" type="text" @click="handleShowDatas(report)" v-tippy="{ arrow: true }"
                         content="数据">
                数据
              </el-button>
              <el-button size="small" type="text" @click="handleRefresh(report)" v-tippy="{ arrow: true }"
                         content="刷新">
                刷新
              </el-button>
              <el-button size="small" type="text" @click="handleEdit(report)">编辑</el-button>
              <el-button size="small" type="text" @click="handleDelete(report)">删除</el-button>
            </div>
            <JIcon
              v-if="report.type === 3"
              :icon="DFT_ICONS.nodejs"
              class="comp-tag-tr"
              @click.stop="handleEdit(report)"
              v-tippy="{ arrow: true }"
              content="低码报表"
            />
          </div>
        </el-col>
      </el-row>
    </div>

    <el-pagination
      v-if="pagination.total > pagination.pageSize"
      v-model:current-page="pagination.page"
      v-model:page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next"
      :page-sizes="[10, 20, 50, 100]"
      :total="pagination.total"
      @size-change="refresh"
      @current-change="refresh"
    />

    <el-dialog
      v-model="showCreate"
      :title="winName"
      top="60px"
      width="1200px"
      :append-to-body="true"
      :fullscreen="false"
      :before-close="closeWin"
      custom-class="m-dialog-fullscreen"
    >
      <c-define
        @close="closeWin"
        :mod-id="currentReport?.reportdef_id"
        :input-form-id="form?.form_id"
        :show="showCreate"
        :is-view="isView"
      />
    </el-dialog>

    <el-dialog
      v-model="datasWinShow"
      :title="datasWinName"
      top="60px"
      :append-to-body="true"
      :fullscreen="false"
    >
      <c-report-datas
        @close="closeDatasWin"
        :report-define-id="currentDatasReport?.reportdef_id"
        :show="datasWinShow"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, computed, onMounted, watch} from 'vue'
import _ from 'lodash'
import cDefine from './define.vue'
import cReportDatas from './datas.vue'
import {api} from "@jzl/api";
import {$reportUtils} from "@jzl/utils";
import {DFT_ICONS} from "@jzl/icons";

// ====== Props ======
const props = defineProps({
  form: {
    type: Object,
    required: true
  }
})

// ====== State ======
const showCreate = ref(false)
const isView = ref(false)
const currentReport = ref(null)
const loading = ref(false)
const list = ref([])
const selected = ref(null)

const query = reactive({
  form_id: -1,
  title: '',
  type: ''
})

const pagination = reactive({
  page: 1,
  pageSize: 50,
  total: 0
})

const datasWinName = ref('')
const datasWinShow = ref(false)
const currentDatasReport = ref(null)

// ====== Computed ======
const winName = computed(() => {
  let typeName = isView.value ? '查看' : (currentReport.value?.reportdef_id ? '修改' : '创建')
  return currentReport.value?.title ? `${typeName}【${currentReport.value.title}】` : typeName
})

// ====== Methods ======
async function refresh() {
  query.form_id = _.get(props.form, 'form_id', -1) || -1
  loading.value = true

  try {
    const ret = await api.report.getReportDefList(query, pagination)
    list.value = _.get(ret, 'rows', [])
    pagination.total = _.get(ret, 'count', 0)
  } finally {
    loading.value = false
  }
}

function closeWin(flag) {
  showCreate.value = false
  isView.value = false
  refresh()
}

function closeDatasWin() {
  datasWinShow.value = false
}

function handleShowDatas(it) {
  datasWinShow.value = true
  currentDatasReport.value = it
  datasWinName.value = `【${it.title}】的报表数据记录`
}

function handleView(it) {
  showCreate.value = true
  isView.value = true
  currentReport.value = it
}

async function handleRefresh(it) {
  if (!it?.reportdef_id) return
  const ret = await api.report.clearReportDefCache(it.reportdef_id)
  if (ret) $jui.toast('清除成功！')
}

function handleEdit(it) {
  showCreate.value = true
  isView.value = false
  currentReport.value = it
}

async function _delete(id) {
  const ret = await api.report.removeReportDef(id)
  if (ret) await refresh()
}

function handleDelete(it) {
  if (!it?.reportdef_id) return
  $jui.confirm(`此操作将永久删除该报表定义【${it.title}】, 是否继续?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await _delete(it.reportdef_id)
  })
}

function handleShowCreate() {
  showCreate.value = true
  isView.value = false
  currentReport.value = null
}

function handleSelect(it) {
  selected.value = it
}

// ====== Watchers ======
watch(
  () => props.form,
  () => {
    refresh()
  },
  {deep: true}
)

watch(
  () => query.type,
  () => {
    refresh()
  }
)

// ====== Lifecycle ======
onMounted(() => {
  refresh()
})
</script>

<style lang="scss" scoped>
.comp-box {
  border-radius: 10px;
  height: 140px;

  .comp-tag-tr {
    position: absolute;
    padding: 2px;
    right: 10px;
    top: 10px;
    background: #409eff;
    color: #FFF;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;

    &:hover {
      background: #66b1ff;
      box-shadow: 0 0 5px #66b1ff;
    }
  }

  .comp-head {
    border-bottom: none;
    flex-flow: column;
    align-items: flex-start;
    padding: 8px 15px;

    .comp-head-title {
      line-height: 1.6;
      margin-bottom: 3px;
    }

    .comp-head-remark {
      margin-bottom: 5px;
      cursor: pointer;
    }
  }

  .comp-body {
    padding: 0px 10px;

    .comp-chart-icons {
      display: flex;
      height: 45px;
      justify-content: space-around;
      align-items: center;
    }

    .chart-icon {
      /*margin: 0 5px;
      font-size: 16px;
      color: #337ab7;*/

      &.disabled {
        color: #EEE;
      }
    }
  }

  .comp-foot {
    color: #999;
    font-size: 12px;
    padding: 10px 15px;
  }

  .actions {
    border-top: none;
    display: none;
    padding: 10px 0px;
  }

  &:hover {
    .actions {
      display: flex;
    }

    .comp-foot {
      display: none;
    }
  }
}
</style>
